<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>peoplePredetermine 散客预定</title>
	</head>
	<link rel="stylesheet" href="../css/common.css" />
	<link rel="stylesheet" href="../css/less/common_less.css" />
	<style>
		body{
			height:1000px;
		}
		.Dolo_searchPanle{
			width:1136px;
		}
		.Dolo_searchPanle p span{
			margin-left:10px;
		}
		.Dolo_searchPanle p span:nth-of-type(1){
			margin-left:20px;
		}
		.Dolo_searchPanle p span input[type=text]{
			width:120px;
			height:22px;
			border:1px solid #e0e0ea;
			border-radius:2px;
			margin-left:5px;
			padding-left:10px;
		}
		select{
			height:24px;
			width:70px;
			border:1px solid #e0e0ea;
			border-radius:2px;
			font-family:"微软雅黑";
		}
		.querySpan {
			float: right;
			margin-right: 20px;
			margin-top: 11px;
		}

				
		.dataPanle{
			width:1136px;
			margin-left:4px;
			background:white;			
		}
		table{
			width:1136px;
		}
		tr{
			border-bottom:4px solid #eeeeee;
		}
		td{
			height:66px;
		}		
		input[type='radio']{
			position:relative;
			top:5px;
			right:5px;
		}			
		.buleBottomBorder{
			background:#00aa99;
			color:white;
		}				
		.connectImg{		
			background:url("../img/pricePlan/connect.png") no-repeat;		
		}
		.exchangeAirportCode{
			cursor:pointer;
			font-size:14px;
		}				
		.theadtr{
			background:#d7d7d7;
			color:#6b6b6b;
			z-index:1000;
		}
		.datePanle{
			height:50px;
			width:1136px;
			background:white;
			margin-left:4px;
			line-height:50px;
			position:relative;
			overflow:hidden;
			margin-bottom:4px;
		}	
		.liBox{
			width:10000px;
			height:50px;
			position:relative;
			left:30px;
		}
		.move{
			width:152px;
			height:50px;
			float:left;
			border-left:2px solid #e3e4e8;			
			text-align:center;
			cursor:pointer;
			background:white;
			line-height:22px;
		}
		.buleBottomBorder{
			background:#00aa99;
			color:white;
		}
		.toLeft,.toRight{
			display:block;
			width:30px;
			height:50px;
			z-index:1000;
			cursor:pointer;
		}
		.toLeft{
			position:absolute;
			left:0;
			background:url("../img/toL.png") no-repeat center center white;
			background-size:contant;
		}
		.toRight{
			position:absolute;
			right:0;
			background:url("../img/toR.png") no-repeat center center white;
			background-size:contant;
		}
		.font14px{
			font-size: 14px;
		}
		.shoppingMess{
			width:1136px;			
			margin-left:4px;
			height:42px;
		}
		
		
		.freeGoBack{
			float:right;
			border:1px solid #00ab98;
			margin-top:9px;
			width:160px;
			height:22px;
			border-radius:2px;
			margin-right:20px;
		}
		.freeGoBack>span{
			display:inline-block;
			width:80px;
			height:22px;
			text-align:center;
			line-height:22px;
			cursor:pointer;
		}
		.freeGoBack .active{
			background:#00ab98;
			color:white;			
		}
		.tripType{
			height:40px;
			line-height:40px;
			margin-left:4px;
			display:none;
		}
		.tripType>span{
			display:inline-block;
			width:80px;
			height:37px;
			text-align:center;
			border-bottom:2px solid #d7d7d7;
			cursor:pointer;
		}
		.tripType>.active_{
			color:#00aa98;
			border-bottom:2px solid #00aa98;
		}
	</style>
	<body>
		<div class='Dolo_searchPanle f60666'>
			<p>
				<span>出发<input uppercase class="deptCity autocomplete" type='text'/></span>
				<span class='iconfont exchangeAirportCode'>&#xe719;</span>
				<span>到达<input uppercase class="arrCity autocomplete" type='text'/></span>
				<span>去程日期<input class="deptStartDate datespicker" type='text' onFocus="new WdatePicker({dateFmt:'yyyy-MM-dd'})"/></span>
				<span>返程日期<input class="deptEndDate datespicker" type='text' onFocus="new WdatePicker({dateFmt:'yyyy-MM-dd'})"/></span>
				<span>舱位
					<select class='seatClass'>
						<option value='F'>头等舱</option>
						<option value='C'>商务舱</option>
						<option value='Y'>经济舱</option>
					</select>
				</span>
				<span><input type='radio' name='route' value='OW' checked/>单程</span>
				<span><input type='radio' name='route' value='RT'/>往返</span>
				<button class="querySpan searchBtn"><i class="iconfont setIcon">&#xe661;</i>查询</button>
			</p>
		</div>		
		<div class="shoppingMess">
			<div class="freeGoBack"><span name="free" class="freeColl">自由搭配</span><span name="goBack" class="goBackColl active">往返组合</span></div>							
		</div>
		<div class='datePanle'>
			<span class='toLeft'></span>
			<span class='toRight'></span>
				<ul class='liBox'>
					
				</ul>
		</div>
		<div class="tripType"><span class="goTrip active_" type="go">去程</span><span class="backTrip" type="back">回程</span></div>	
		<div class='dataPanle'>
			<table>
				<tr class="theadtr aaaaaa" style='height:40px;line-height:40px;'>
					<th>航班号</th>
					<th>出发</th>
					<th>到达</th>
					<th>舱位</th>
					<th>座位数</th>
					<th>行程天数</th>
					<th>单价含税（张）</th>
				</tr>
				<tbody class='clear'>
				
				</tbody>
			</table>
			
		</div>
		<script type="text/javascript" src="../js/jquery-1.12.4.js" ></script>
		<script type="text/javascript" src="../js/jquery.autocomplete.js" ></script>
		<script type="text/javascript" src="../js/common.js" ></script>
		<script type="text/javascript" src="../layer-v2.4/layer/layer.js" ></script>
		<script type="text/javascript" src="../js/My97DatePicker/WdatePicker.js" charset="utf-8"></script>
		<script>
			
			$(".querySpan").click(function(){				
				getAjax()
			})
			function getAjax(){
				if(/\((.)+?\)/.test($(".deptCity").val())){//获取出发机场三字码
					var deptCity = $(".deptCity").val().slice(-5).split("(")[1].split(")")[0];
				}else{
					var deptCity = ($(".deptCity").val()).toUpperCase();
				}
				if(/\((.)+?\)/.test($(".arrCity").val())){//获取到达机场三字码
					var arrCity = $(".arrCity").val().slice(-5).split("(")[1].split(")")[0];
				}else{
					var arrCity = ($(".arrCity").val()).toUpperCase();
				}		

				var seatClass = $(".seatClass").val();								
				var deptStartDate = $(".deptStartDate").val();
				var deptEndDate = $(".deptEndDate").val();			
				var intval = getDaysInterval(deptStartDate,deptEndDate);//时间间隔；
				routingType = $("input[name=route]:checked").val();	
				var collType=$(".active").attr("name");   //组合类型
				var url="";                               //选择索要请求的url
				$(".tripType").hide();
				if(collType=="free"){
					if(routingType=="OW"){
						if(deptCity==""||arrCity==""||deptStartDate==""){
							layer.msg("请输入完整的搜索条件！")
							return false;
						}
						url='../shopping/api/freeShopping?deptCity='+deptCity+'&seatCount=0&source=pss&arrCity='+arrCity+'&deptStartDate='+deptStartDate+'&seatClass='+seatClass+'&charterType=SK&routingType='+routingType+'&temp='+Math.random();
					}else{
						$(".tripType").show();
						var type = $(".tripType").find(".active_").attr("type");
						var exsit = $(".tripType").is(":hidden");						
						if(deptCity==""||arrCity==""||deptStartDate==""||deptEndDate==""){
							layer.msg("请输入完整的搜索条件！")
							return false;
						}
						if(!exsit&&type=="go"){
							url='../shopping/api/freeShopping?deptCity='+deptCity+'&seatCount=0&source=pss&arrCity='+arrCity+'&deptStartDate='+deptStartDate+'&seatClass='+seatClass+'&charterType=SK&routingType=OW&temp='+Math.random();
						}
						if(!exsit&&type=="back"){
							url='../shopping/api/freeShopping?deptCity='+arrCity+'&seatCount=0&source=pss&arrCity='+deptCity+'&deptStartDate='+deptEndDate+'&seatClass='+seatClass+'&charterType=SK&routingType=OW&temp='+Math.random();
						}
						
						//url='../shopping/api/freeShopping?deptCity='+deptCity+'&seatCount=0&source=pss&arrCity='+arrCity+'&deptStartDate='+deptStartDate+'&seatClass='+seatClass+'&charterType=SK&routingType='+routingType+'&intval='+intval+'&temp='+Math.random();
					}
					
					
				}else{
					url='../shopping/api/getIndividualShopping?deptCity='+deptCity+'&source=pss&arrCity='+arrCity+'&deptStartDate='+deptStartDate+'&seatClass='+seatClass+'&charterType=SK&routingType='+routingType+'&temp='+Math.random();
					if(deptCity==""||arrCity==""||deptStartDate==""){
						layer.msg("请输入完整的搜索条件！")
						return false;
					}
				}				
				$.ajax({
					type:"get",	
					//url:"../shopping/api/getIndividualShopping?deptCity=PEK&arrCity=LXA&deptStartDate=2016-12-09&seatClass=F&charterType=SK&routingType=OW",
					url:url,
					dataType:"json",
					async:true,
					success:function(data){	
						if(data.status=="1002"){
							layer.alert(data.message);
							return false;
						}
						$(".clear").empty();
						$(".liBox").empty();				
						data_ = data;
						var str1="";						
						labelArr = [];
						for(var i=0;i<data.data.length;i++){
							if(!data.data[i].minPrice||data.data[i].minPrice==null||data.data[i].minPrice==undefined){
								data.data[i].minPrice="";
							}else{
								data.data[i].minPrice="￥"+data.data[i].minPrice
							}
							str1+="<li class='move'><span class='indexDate'>"+data.data[i].date+"</span><br><span class='min_price fa2828 font14px'>"+data.data[i].minPrice+"</span></li>"
							labelArr.push(data.data[i].date)
						}
						$(".liBox").append(str1);												
					}
				})
			}
//_____________________________________________点击价格日历_________________________
			$(".datePanle").delegate(".move","click",function(){
				$(".clear").empty();
				$(this).addClass("buleBottomBorder").siblings().removeClass('buleBottomBorder');
				$(this).find(".min_price").removeClass("fa2828").addClass("faa000").parent().siblings().find(".min_price").removeClass("faa000").addClass("fa2828");
				
				var str2="";
				var index;	
				for(var i=0;i<labelArr.length;i++){
					if($(this).find("span[class=indexDate]").text()==labelArr[i]){
						index = i;
						$(".goBackDate").text(labelArr[i]);//显示往返信息的时间
					}
				}						
				for(var i=0;i<data_.data[index].products.length;i++){
					for(var j=0;j<data_.data[index].products[i].segments.length;j++){
						var length = data_.data[index].products[i].segments.length
						var strArrDate = data_.data[index].products[i].segments[j].arrDate
						var strDepDate = data_.data[index].products[i].segments[j].depDate
						var depApCn = data_.data[index].products[i].segments[j].depApCn
						var depAp = data_.data[index].products[i].segments[j].depAp
						var depTerminal = data_.data[index].products[i].segments[j].depTerminal
						var depDate = data_.data[index].products[i].segments[j].depDate
						var depTime = data_.data[index].products[i].segments[j].depTime
						var arrApCn = data_.data[index].products[i].segments[j].arrApCn
						var arrAp = data_.data[index].products[i].segments[j].arrAp
						var arrTerminal = data_.data[index].products[i].segments[j].arrTerminal
						var arrDate = data_.data[index].products[i].segments[j].arrDate
						var arrTime = data_.data[index].products[i].segments[j].arrTime
						var connectImg = "";
						if(data_.data[index].products[i].connectFltInfo){
							connectImg = "connectImg";
						}
						
						str2+="<tr>"+
									 "<td class='faa000 "+connectImg+"'>"+data_.data[index].products[i].segments[j].flightNo+"</td>"+
							 		 "<td><span class='f262929 font14px'>"+depApCn +"("+depAp+")<span class='f00aa99'>"+depTerminal+"</span></span></br><span class='f00aa99' style='font-weight:bold'><span>"+depDate +"</span>&nbsp;&nbsp;<span class='f262929' style='font-weight:normal;'>"+ depTime+"</span></span></td>"+
							 		 "<td><span class='f262929 font14px'>"+arrApCn +"("+arrAp+")<span class='f00aa99'>"+arrTerminal+"</span></span></br><span class='f00aa99' style='font-weight:bold'><span>"+arrDate +"</span>&nbsp;&nbsp;<span class='f262929' style='font-weight:normal;'>"+ arrTime+"</span></span></td>"
						
						if(j==0){
							str2+=  "<td rowspan="+length+" class='f262929 font14px'>"+commomFun.toEmptyString(data_.data[index].products[i].fare.seatClass)+"/"+commomFun.cabinStatusStr(data_.data[index].products[i].fare.seatRank)+"</td>"+
							  		"<td rowspan="+length+" class='f262929 font14px'>"+data_.data[index].products[i].productSeats+"</td>"+
							  		"<td rowspan="+length+" class='f262929 font14px'>"+commomFun.toEmptyString(data_.data[index].products[i].journeyDays)+"</td>"+
							  		"<td rowspan="+length+" class='font14px'><span class='fa2828'>"+(data_.data[index].products[i].fare.adultPrice+data_.data[index].products[i].fare.adultTFC)+"</span> <span style='color:black;'>"+ commomFun.toEmptyString(data_.data[index].products[i].fare.currency)+"</span></td>"			
						}
						str2+= "</tr>";	
						//自由组合的多等级舱位
						
						var otherFare = data_.data[index].products[i].otherFare?data_.data[index].products[i].otherFare:false;
						if($(".active").attr("name")=="free"&&otherFare){
							for(var m=0;m<otherFare.length;m++){
								
								str2+="<tr>"+
								 			"<td class='faa000 "+connectImg+"'>"+data_.data[index].products[i].segments[j].flightNo+"</td>"+
									 		"<td><span class='f262929 font14px'>"+depApCn +"("+depAp+")<span class='f00aa99'>"+depTerminal+"</span></span></br><span class='f00aa99' style='font-weight:bold'><span>"+depDate +"</span>&nbsp;&nbsp;<span class='f262929' style='font-weight:normal;'>"+ depTime+"</span></span></td>"+
									 		"<td><span class='f262929 font14px'>"+arrApCn +"("+arrAp+")<span class='f00aa99'>"+arrTerminal+"</span></span></br><span class='f00aa99' style='font-weight:bold'><span>"+arrDate +"</span>&nbsp;&nbsp;<span class='f262929' style='font-weight:normal;'>"+ arrTime+"</span></span></td>"
					
								if(j==0){
									str2+=  "<td rowspan="+length+" class='f262929 font14px'>"+commomFun.toEmptyString(data_.data[index].products[i].otherFare[m].seatClass)+"/"+commomFun.cabinStatusStr(data_.data[index].products[i].otherFare[m].seatRank)+"</td>"+
									  		"<td rowspan="+length+" class='f262929 font14px'>"+data_.data[index].products[i].otherFare[m].seatCount+"</td>"+
									  		"<td rowspan="+length+" class='f262929 font14px'>"+commomFun.toEmptyString(data_.data[index].products[i].journeyDays)+"</td>"+
									  		"<td rowspan="+length+" class='font14px'><span class='fa2828'>"+(data_.data[index].products[i].otherFare[m].adultPrice+data_.data[index].products[i].otherFare[m].adultTFC)+"</span> <span style='color:black;'>"+ commomFun.toEmptyString(data_.data[index].products[i].otherFare[m].currency)+"</span></td>"			
								}
								str2+= "</tr>";	
							}	
						}
						//自由组合往返的多等级舱位
						
					}	
					
					
					$(".clear").append(str2);
				}
			})
//_____________________________________________自由搭配_________________________		
			$(".freeColl").click(function(){
				if(!$(this).hasClass("active")){
					$(".clear").empty();
					$(".liBox").empty();	
				}
				$(this).addClass("active");
				$(".goBackColl").removeClass("active");
				
			})
//_____________________________________________往返的自由搭配点击去程回程_____________
			$(".tripType>span").click(function(){				
				$(this).addClass("active_").siblings().removeClass("active_");
				getAjax();				
			})
//_____________________________________________往返组合_________________________	
			$(".goBackColl").click(function(){
				if(!$(this).hasClass("active")){
					$(".clear").empty();
					$(".liBox").empty();	
				}
				$(this).addClass("active");
				$(".freeColl").removeClass("active");		
			})
			
			
//_____________________________________________出发到达机场条件互换________________
			$(".exchangeAirportCode").click(function(){
				var exchangeVar = $(".deptCity").val();
				$(".deptCity").val($(".arrCity").val());
				$(".arrCity").val(exchangeVar);
			})
			

		
//____________________________________________________________________________机场联想
			var autocompleteData=[];
			$.ajax({
				type:"get",
				url:"../Airapt?pageSize=100000&pageNum=1&temp="+Math.random(),
				dataType:"json",
				success:function(data){	
					autocompleteData = data.data.list; 
					$('.autocomplete').autocomplete({
					    lookup: autocompleteData,
					    autoSelectFirst:true,
					    onSelect: function (suggestion) {		   
					    }
					});
				}
			})
		</script>
	</body>
</html>
